import { LeftOutlined } from '@ant-design/icons'
import { Button, Checkbox, Form, Input, Typography } from 'antd'
import { CreateUserParams, apiPostUser } from '../../../api/user'
import { useNavigate } from 'react-router-dom'

const { Title } = Typography



const onFinishFailed = (errorInfo: unknown) => {
    console.log('Failed:', errorInfo)
}

interface FieldType extends CreateUserParams {
    remember?: string;
    confirm?: string
}
const RegisterForm: React.FC = () => {
    const navigate = useNavigate()
    const onFinish = async (values: FieldType) => {
        console.log('Success:', values)
        navigate('/register/sucess')
        try {
            await apiPostUser(values)
            // navigate('/sucess')
        } catch (error) {
            console.log(error)
        }

    }
    return (
        <>
            <Button
                type='text'
                icon={<LeftOutlined />}
                onClick={()=>history.back()}
            >
                返回
            </Button>
            <Typography>
                <Title level={3}>
                    完成注册
                </Title>
            </Typography>
            <div style={{ overflow: 'auto' }}>
                <Form

                    name='basic'
                    layout='vertical'
                    style={{ minWidth: 344 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete='off'
                // size='large'
                >
                    <Form.Item<FieldType>
                        name='username'
                        label='用户名'
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item<FieldType>
                        name='nickname'
                        label='昵称'
                        rules={[{ required: true, message: 'Please input your nickname!' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item<FieldType>
                        name='password'
                        label='密码'
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password placeholder='请输入' />
                    </Form.Item>
                    <Form.Item<FieldType>
                        name="confirm"
                        label="确定密码"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: 'Please confirm your password!',
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve()
                                    }
                                    return Promise.reject(new Error('The new password that you entered do not match!'))
                                },
                            }),
                        ]}
                    >
                        <Input.Password placeholder='请输入' />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit' size='large' block>
                            提交
                        </Button>
                    </Form.Item>
                    <Form.Item
                        name="agreement"
                        valuePropName="checked"
                    >
                        <Checkbox>
                            I have read the <a href="">agreement</a>
                        </Checkbox>
                    </Form.Item>
                </Form>
            </div>
        </>
    )
}

export default RegisterForm